<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>

		<script src="../js/vue.js"></script>
		<div id="app">
			<cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>
		</div>
		<template id="cpn">
			<div>
				props:{{number1}}<br />
				data:{{dnumber1}}<br />
				<!-- <input type="text" v-model="dnumber1"/><br /> -->
				<input type="text" :value="dnumber1" @input="numInput1" /><br />
				props:{{number2}}<br />
				data:{{dnumber2}}<br />
				<!-- <input type="text" v-model="dnumber2"/><br /> -->
				<input type="text" :value="dnumber2" @input="numInput2" /><br />
			</div>
		</template>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					num1: 0,
					num2: 1
				},
				methods: {
					num1change(value) {
						this.num1 = parseFloat(value)
					},
					num2change(value) {
						this.num2 = parseFloat(value)
					}
				},
				components: {
					cpn: {
						template: "#cpn",
						props: {
							number1: Number,
							number2: Number
						},
						data() {
							return {
								dnumber1: this.number1,
								dnumber2: this.number2,
							}
						},
						methods: {
							numInput1(event) {
								// 1.将input的值赋到dnumber1上
								this.dnumber1 = event.target.value;

								// 2.为了让父组件修改值，发出一个事件
								this.$emit("num1change", this.dnumber1)

								// 3.修改dnumber2的值
								this.dnumber2 = this.dnumber1 * 100
								this.$emit("num2change", this.dnumber2)
							},
							numInput2(event) {
								this.dnumber2 = event.target.value;
								this.$emit("num2change", this.dnumber2)

								// 修改dnumber1的值
								this.dnumber1 = this.dnumber2 / 100
								this.$emit("num1change", this.dnumber1)
							},
						}
					}
				}
			})
		</script>
	</body>
</html>
